<template>
	<div class="noticestyle">
		<!-- 标题 -->
		<h2>{{ datas.text }}</h2>
		<el-tabs type="border-card" :stretch="true">
			<el-tab-pane label="内容">
				<div class="decorate-card">
					<div class="title">公告图标</div>
					<el-form label-width="100px">
						<el-form-item label="公告样式">
							<el-radio-group v-model="datas.mode">
								<el-radio :label="1">系统图标</el-radio>
								<el-radio :label="2">自定义</el-radio>
							</el-radio-group>
						</el-form-item>

						<div v-if="datas.mode === 1">
							<el-form-item label="公告图" prop="noticeText">
								<div class="notice-flex cursor-pointer">
									<div class="notice-flex notice notice-1" @click="choiceNoticeImg(notice1)" :class="{ 'notice-active': datas.src === notice1 }">
										<el-image :src="STATIC_URL + 'static/img/shop/decorate/notice-1.png'" fit="cover" class="cover-image" />
									</div>
									<div class="notice-flex notice notice-2" @click="choiceNoticeImg(notice2)" :class="{ 'notice-active': datas.src === notice2 }">
										<el-image :src="STATIC_URL + 'static/img/shop/decorate/notice-2.png'" fit="cover" class="cover-image" />
									</div>
									<div class="notice-flex notice notice-3" @click="choiceNoticeImg(notice3)" :class="{ 'notice-active': datas.src === notice3 }">
										<el-image :src="STATIC_URL + 'static/img/shop/decorate/notice-3.png'" fit="cover" class="cover-image" />
									</div>
								</div>
							</el-form-item>
						</div>

						<el-form-item label="图片" v-if="datas.mode === 2">
							<div class="sd-flex">
								<div class="choice-image choice-image-delete" @click="openChoiceImg">
									<el-image v-if="datas.src != ''" :src="STATIC_URL + datas.src" fit="cover" />
									<el-icon v-else>
										<ele-Plus />
									</el-icon>

									<div class="delete-content" @click.stop="datas.src = ''" v-if="datas.src != ''">
										<SvgIcon name="ele-DeleteFilled"></SvgIcon>
									</div>
								</div>
								<div class="ml10 tip">建议尺寸:24*24</div>
							</div>
							<!-- <div @click="openChoiceImg" class="image cursor-pointer">
								<el-image style="width: 50px; height: 50px" :src="prefix + datas.src" :fit="fit" v-if="datas.src != ''" />
								<SvgIcon v-else name="ele-Plus"></SvgIcon>
							</div> -->
						</el-form-item>

						<div class="title">内容设置</div>

						<el-form-item label="公告内容">
							<el-input v-model="datas.title.text">
								<template #append>
									<el-color-picker v-model="datas.title.color" />
								</template>
							</el-input>
						</el-form-item>

						<el-form-item label="公告链接">
							<el-input v-model="datas.url">
								<template #append> <el-button class="ml1 mr1" @click="openChoiceData">选择</el-button> </template>
							</el-input>
						</el-form-item>

						<!-- 背景颜色 -->
						<!-- <el-form-item label="背景颜色">
							<el-color-picker v-model="datas.backColor"> </el-color-picker>
						</el-form-item> -->

						<!-- 文字颜色 -->
						<!-- <el-form-item label="文字颜色">
							<el-color-picker v-model="datas.textColor"> </el-color-picker>
						</el-form-item> -->

						<el-form-item label="滚动速度">
							<el-slider v-model="datas.speed" :max="100" :min="0" show-input> </el-slider>
						</el-form-item>
					</el-form>
				</div>
			</el-tab-pane>
			<el-tab-pane label="样式">
				<DataStyle :datas="datas.dataStyle"></DataStyle>
			</el-tab-pane>
			<el-tab-pane label="数据">
				<StyleComponentData :datas="datas"></StyleComponentData>
			</el-tab-pane>
		</el-tabs>
		<!-- 公告 -->
		<FileChoice ref="FileChoiceRef" @choiceFile="choiceFile"></FileChoice>
		<PageData ref="PageDataRef" @choice="choicePage"></PageData>
	</div>
</template>

<script setup name="noticestyle">
import { defineAsyncComponent, ref } from 'vue';
import { STATIC_URL } from '/@/utils/config';
const FileChoice = defineAsyncComponent(() => import('/@/views/file/choice/index.vue'));
const FileChoiceRef = ref();
const PageData = defineAsyncComponent(() => import('/@/views/shop/data/page/choice/index.vue'));
const notice1 = 'static/img/shop/decorate/notice-1.png';
const notice2 = 'static/img/shop/decorate/notice-2.png';
const notice3 = 'static/img/shop/decorate/notice-3.png';
const PageDataRef = ref();
const props = defineProps({
	datas: {},
});

const openChoiceImg = () => {
	FileChoiceRef.value.openFileChoiceDialog();
};

const choiceNoticeImg = (url) => {
	props.datas.src = url;
};

const choiceFile = (res) => {
	props.datas.src = res[0].visitRelativePath;
};

const openChoiceData = () => {
	PageDataRef.value.openDialog();
};

const choicePage = (res) => {
	props.datas.url = res.urlContent;
};
</script>

<style scoped lang="scss">
.noticestyle {
	width: 100%;
	// position: absolute;
	// left: 0;
	// top: 0;
	padding: 0 10px 20px;
	box-sizing: border-box;
	/* 标题 */
	h2 {
		padding: 24px 16px 24px 0;
		margin-bottom: 15px;
		border-bottom: 1px solid #f2f4f6;
		font-size: 18px;
		font-weight: 600;
		color: #323233;
	}

	.lef {
		:deep(.el-form-item__label) {
			text-align: left;
		}
	}

	/* 颜色选择器 */
	.picke {
		float: right;
	}

	.default-img {
		height: 28px;
		width: 100%;
	}

	.notice-flex {
		display: flex;
		align-items: center;
	}

	.notice-image {
		display: flex;
		width: 100%;
		align-items: center;
		height: 30px;
	}

	.notice-1 {
		width: 72px;
		height: 30px;
	}
	.notice-2 {
		width: 46px;
		height: 30px;
	}
	.notice-3 {
		width: 34px;
		height: 30px;
	}
	.notice {
		margin-right: 12px;
		border-radius: 4px;
		border: 1px solid rgba(223, 230, 233, 1);
	}

	.notice-active {
		border-color: rgba(9, 132, 227, 1);
	}
}

.image {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	border: 1px dashed var(--el-border-color-darker);
}

.el-tabs--border-card {
	:deep(.el-tabs__content) {
		padding: 0px !important;
	}
	border: 0px;

	:deep(.el-tabs__header) {
		background-color: #d9d9d9 !important;
	}
}

:deep(.el-input-group__append) {
	padding: 0px !important;
}

:deep(.el-color-picker__trigger) {
	padding: 0px;
}

:deep(.el-color-picker__color) {
	border: 0px;
}
</style>
